import React, { useState, memo } from 'react';
import { Row, Col, Form, Modal, Table, Button, Icon, message, Input } from 'antd';
import styles from './index.less';
import useModel from '../../useModel.js';
import { useDynamicList, useUpdateEffect } from '@umijs/hooks';

const DynamicList = ({ fields, form }) => {
  const { list, remove, getKey, move, push, sortForm } = useDynamicList([
    {
      name: 'my bro',
      age: '23',
      memo: "he's my bro",
    },
    {
      name: 'my sis',
      age: '21',
      memo: "she's my sis",
    },
    {},
  ]);
  const [result, setResult] = useState('');
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text, row, index) => (
        <>
          <Form.Item name={`params[${getKey(index)}].name`} noStyle>
            <Input
              style={{
                width: 120,
                marginRight: 16,
              }}
              placeholder="name"
            />
          </Form.Item>
        </>
      ),
    },
    {
      title: '',
      dataIndex: 'age',
      render: (text, row, index) => <span>关联</span>,
    },
    {
      key: 'memo',
      title: 'Memo',
      dataIndex: 'memo',
      render: (text, row, index) => (
        <>
          <Form.Item name={`params[${getKey(index)}].memo`} noStyle>
            <Input placeholder="please input the memo" />
          </Form.Item>
          <Button.Group>
            <Button type="danger" onClick={() => remove(index)}>
              Delete
            </Button>
          </Button.Group>
        </>
      ),
    },
  ];
  return (
    <Table
      columns={columns}
      dataSource={list}
      rowKey={(r, index) => getKey(index).toString()}
      pagination={false}
    />
  );
};
export default memo(props => {
  const { state, setState } = useModel();
  const [form] = Form.useForm();

  const showModal = () => {
    setState({
      enumVisible: true,
    });
  };

  const handleOk = async e => {
    const fields = form.getFieldsValue();
    // if (state.isAdd) {
    //   addProps.run({ ...fields });
    // } else {
    //   const params = { ...fields, id: state.fsuTypeItem.id };
    //   updateProps.run(params);
    // }
    setState({
      enumVisible: false,
    });
  };

  const handleCancel = e => {
    setState({
      enumVisible: false,
    });
  };

  return (
    <Modal
      className={styles['modal-wrap']}
      title={
        <span>
          <span style={{ fontWeight: 'bolder' }}>报文模板别名</span>
          {state?.fsuTypeItem?.name && (
            <span
              style={{ fontSize: '12px', color: '#666' }}
            >{`(${state?.fsuTypeItem?.name})`}</span>
          )}
        </span>
      }
      width={600}
      visible={state.enumVisible}
      onOk={handleOk}
      okText={'确认'}
      onCancel={'取消'}
      destroyOnClose={true}
      onCancel={handleCancel}
    >
      <Form form={form}>
        <DynamicList />
      </Form>
    </Modal>
  );
});
